import React, { useEffect, useState } from 'react';

import { Table, Space } from 'antd';
import { getAllUsers } from '../../api/actions/user';

const columns = [
  {
    title: 'Id',
    dataIndex: '_id',
  },
  {
    title: '用户名',
    dataIndex: 'name',
  },
  {
    title: '头像',
    dataIndex: 'avatar',
  },
  {
    title: '邮箱',
    dataIndex: 'mail',
  },
  {
    title: '密码',
    dataIndex: 'password',
  },
  {
    title: '联系方式',
    dataIndex: 'phone',
  },
  {
    title: '操作',
    render: (text, record) => (
      <Space size="middle">
        <a>
          Invite
          {' '}
          {record.name}
        </a>
        <a>Delete</a>
      </Space>
    ),
  },
];

export default () => {
  const [dataSource, setDataSource] = useState([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const fetch = async () => {
      setLoading(true);
      const result = await getAllUsers();
      setDataSource(result.data);
      setLoading(false);
    };
    fetch();
  }, []);
  return (
    <Table loading={loading} columns={columns} dataSource={dataSource} rowKey={(r) => r._id} />
  );
};
